# Starting a design with accessibility

DevFeed: [Starting a design with accessibility](<https://devfeed.tech/articles/starting-a-design-with-accessibility-9414.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/starting-a-design-with-accessibility/>)

Author: Steve Barnett

Published: 2021-08-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [HTML](<https://devfeed.tech/topics/html.md>), [alt text](<https://devfeed.tech/topics/alt-text.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [Figma](<https://devfeed.tech/topics/figma.md>), [Sketch](<https://devfeed.tech/topics/sketch.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [alt-text](<https://devfeed.tech/tags/alt-text.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [presentation](<https://devfeed.tech/tags/presentation.md>)

## AI overview

This article explains how to begin a design with accessibility in mind. It recommends creating a text-only design first to clarify content, structure, reading order, focus order, image information, link and button text, and form labels, followed by an HTML-only design using semantic elements before adding CSS or layout.

## Source excerpt

Designing with accessibility in mind from the start is even better than reviewing a design for accessibility. It helps us consider the wide range of people who use our products and services. Here are three things we can do to start a design with accessibility. Do a text-only design Doing a text-only design to helps us clarify the order and content of a page. What to do We can write out the design in text before opening up our favorite design tool (like Sketch or Figma or Adobe XD). Start by making a numbered list with pen and paper, or in a text editor. Write out the: Section headings, Content and function of each image, Text of each link, Text of each button, and Name of each form element. Why to do it Writing the content in a numbered list lets us be clear on: The source order of elements in the HTML. This is the order that a screen reader will read the page in. The hierarchy of elements on the page. This helps us make choices about layouts on different screen sizes. The focus order of the page. This helps us make sure it's logical and meaningful. Writing headings lets us divide the page up into logical sections. Screen reader users often use headings as a way of navigating around a page. Writing the text of images means we'll already have alt text (or something that's a good start on it). It helps us be clear on what information (if any) the image is conveying. Writing the text for links highlights why "Click here" isn't helpful link text. Link text should describe where the person goes when they follow the link. Writing the text for buttons highlights why "Submit" usually isn't helpful button text. Button text should describe what happens when the person presses the button. Writing the names of form elements forces us to think of good labels. It forces us to think about the clearest name for each element. Do an HTML-only design Doing an HTML-only design helps us clarify the order and content of a page. It also helps us clarify the single function of each interac