Skip to main content

Designing for web accessibility in 60 seconds

You design on the web for a living, and want to put accessibility first. Let’s do this.I’ve written on the topic before, but it occurred to me recently that while much of that advice holds true almost six years later, it leans technical. What do you do if what you have in front of you isn’t in code yet?You need to ask intelligent questions. This will help you identify better directions within the constraint of accessibility. From there, you can determine where your design needs to strengthen in order to work for more people.Focus on the Content and Information DesignAsk: Is the content specific enough in important areas?People aren’t there to look at your design, they need to read the copy to get their task done. They’ll skim more than read. Look at content within headings, links, buttons and other spots that have calls to action. This copy should make sense on its own, without the context of any accompanying content on the page.A few tips for your content:When writing link text, describe the content of the target of the link.When writing headings, keep them concise and use them to form an outline of the content of the page.Ask: Where does the design’s visual hierarchy put pressure on the size of fonts and color of text?Creating visual hierarchy within a design ranks the information on the page to influence the order a user might view it. However, once you start making decisions about type sizing, color, contrast, spacing and other elements, you can sacrifice accessibility if you’re not careful.Avoid:small font sizes.low color contrast.relying on color alone to communicate a message.alignment that might cause challenges in creating the source order for the content.using motion that can cause seizures or other motion sickness.Be Mindful of Components and StateAsk: What components or elements try to do too much?Many accessibility challenges arise when we take multiple components and try to make them work as one. Think the autocomplete and tooltip. Simplify.Can you do without that complex component? If not, can you test it with people with disabilities to work through some assumptions? Are you including this component because it solves a problem or because many other organizations use something similar? Lots of questions, I know. But design is all about answering questions.Ask: Are all of the design’s different state’s communicated in an accessible way?A design’s states often get overlooked. Focus states, error states and the like add detail and communicate the full intention of a design. Take the time to create them so your design carries a sense of completeness.Some states to pay attention to when designing:Error statesFocus statesSelected statesDisabled statesLoading statesEric Bailey has a list of even more states you might want to consider.I recognize that the title might set off your clickbait alarm and that’s fair. True inclusive design requires much more effort. You may not be able to answer all of these questions in seconds, but you can still get a sense of where you design stands. That matters, and will make your work stronger in the end.  » Read More

Like to keep reading?

This article first appeared on davidakennedy.com. If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

#Dev
How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?

#All

Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.