Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create Blog “web-accessiblity” #3050

Merged
merged 1 commit into from
Aug 16, 2022
Merged

Create Blog “web-accessiblity” #3050

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions src/pages/blog/web-accessiblity.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
title: Web accessiblity
template: post
date: 2022-08-16T16:15:47.770Z
image: /blog/28b10adb-7a99-4ef1-ae2a-4a74484fc50d.jpeg
image_position: right
author: src/data/authors/backup.yaml
show_author_bio: false
cmseditable: true
---
The focus of web accessibility is often on web development – the things that happen in HTML, CSS, or JavaScript. Optimal accessibility should start much earlier, as part of the visual design process. This infographic highlights many important principles of accessible design.
Infographic
Web Accessibility for Designers infographic with text description below
Text Version
Plan Heading Structure Early
Ensure all content and design fits into a logical heading structure.
Ensure Logical Reading Order
The reading order for screen reader users should align with the visual order.
Provide Good Contrast
Be especially careful with shades of orange, yellow, and light gray. Check your contrast levels with our color contrast checker.
Use True Text Instead of Images of Text
True text enlarges better, loads faster, and is easier to translate and customize.
Use Adequate Font Size
Small text is difficult for all users to see. Ensure text is optimally readable.
Remember Line Length
Don’t make lines too long or too short.
Make Sure Links are Recognizable
Distinguish links from body text using more than just color (e.g., underline).
Design Keyboard Focus Indicators
When navigating with the keyboard, the focused item must be visually distinctive.
Design a "Skip to Main Content" Link
A keyboard accessible link for users to skip navigation should be at the top of the page.
Ensure Link Text Makes Sense on Its Own
Avoid "Click Here" or other ambiguous link text such as "More" or "Continue".
Design Usable Widgets and Controls
Dialogs, tooltips, menus, carousels, etc. must be easy to use and accessible.
Use Animation, Video, and Audio Carefully
Provide play/pause buttons. Avoid distracting movement.
Don’t Convey Content Using Only Color
Users may override or may not be able to see differences between colors.
Design Accessible Form Controls
Ensure form controls have descriptive labels, instructions, and error messages.
Embed Code
You can embed this infographic into your own page by copying and pasting the following code: