Examining accessible design - WordPress Tutorial

- [Instructor] From the beginning of the design process, accessibility should be a focal point. While design is a creative process, design is not the same thing as art. What you create needs to communicate information. Design is the process of creating a user experience, and there are many aspects to design that aren't just visual. Whether your visual design process starts with a mood board, a color palette, an image, or a call to action, you should be thinking about the user experience for all users. There are aspects of accessibility that can't be addressed during design, but many key elements are essential parts of the design process. Your design documentation can cover use of form labels, heading levels, focus and hover states for links and buttons, the use of icons and images, and of course color contrast. Thorough interaction design is key for accessibility. Buttons, links, form fields, and status messages all have different states to address. What is the default appearance? How does it look when it changes? What does this control look like when it has a keyboard focus? Does it look different under the mouse cursor? What does a toggle look like when its control is open versus when it's closed? What do error messages look like and where do they appear? Focus states don't have to look different from hover states, but they do serve different purposes. A hover state is a directed action, where the user controls the cursor to point it at a specific object. The user is already looking at the object and they are expecting a change. A focus state, on the other hand, is undirected. The user moves to this position from somewhere else on the page, which may or may not be close to the new position. The user will need to find the new focus point after it occurs. Because of this, focus states shouldn't just barely meet requirements. They need a bold design. Form labels serve an important purpose both visually and for screen readers. A design should make it clear what text is a label and which field it's for. A placeholder text nested inside the form until you add your own content is not a label. A label should be present both before and after you've filled in the field. Heading levels are expected to follow a hierarchy. Your design can show the organization of the page by indicating what heading text uses. Headings act like a table of contents for screen reader users. Whether you're designing a theme or choosing one, these are all questions you can ask yourself while visually examining the theme. Go to the WordPress theme repository and pick a popular theme, any theme. Ask yourself these questions while you review it. Can I distinguish which elements are links and which are buttons? When I navigate through this theme with the keyboard, can I easily tell where I am and what I'm doing? What looks like a heading on this page? Is it actually a heading? Does the structure of those headings make sense to me?