html - astromechanic/cheat_sheets GitHub Wiki
What goes into head?
<title>Violetta Ivanova</title>
<meta charset="utf-8">
<meta name="author" content="Violetta Ivanova">
<meta name="description" content="This is my personal website where I post my art, blog articles, and photos. In my blog, I write about Salesforce and web developent and everything I find interesting.">
With landmarks, blind users using a screen reader have the ability to jump to sections of a web page. In HTML there are some semantic elements that can be used to define different parts of a web page:
Another technique - skip links.
A rule of thumb is to only use one
per page. When we use more than one type of landmark, like multiple s like in this example, we must label each of them. This is done with the attribute aria-label.The element should be used for any interaction that performs an action on the current page. The element should be used for any interaction that navigates to another view. Open the link in the current window. It is not recommended to open links in a new window.
If there is no native semantic HTML element with built-in functionality, we need to write our own. How to pass this info to the assistive technologies? Use a role: (property "name" is not for the screen readers, it's for the programmers)
An accordion is considered a custom component. There is no standard HTML element to use here. Each accordion header should be a or role="button".
Good. It has the role of a button. It also has a name, the content of the div. To give this button a value, we need to tell assistive technologies that it is closed. This is done with aria-expanded="false":
Do not use color as the only visual indicator of a meaning. The most common example of this is to style links without underline or border. How to modify links in a nice way: To improve readability, we can use CSS properties like text-underline-offset and text-decoration-color.
Every image must be coded as meaningful or decorative. Screen readers will ignore decorative images. How to set a decorative image:
- empty alt attribute: alt=""
- use CSS background-image (typical for hero images)
- add icons:
- inline SVG images: <svg aria-hidden="true" …>
How to make a background image meaningful?
Stand alone icons: "Share on Twitter" better than "Twitter Logo". Badges: "Gold supplier". Logos: "Home of Alibaba".
5 of the most common link states: Unvisited Visited Hover Active Focus
- Links should be underlined. (very important for unvisited and visited)
- UseCSS properties [outline-color] and [outline-offset] to make the difference between visited and unvisited more readable.
- Hover state should be good visible (color + bold)
An accessible link text is a text that makes sense without any context. A link text should explain clearly what information the reader will get by clicking on that link. Why:
- users zoom in.
- Google Search prefers descriptive links. Good: Find out more about the HTML language. Bad: Click here
What if I don't know what should go as h1? As the front page of a newspaper, it makes sense to use the logo as the main heading.
Whatever you do, do not remove the focus.
This CSS line is ruining the accessibility for a lot of people:
outline: 0;
or:
overflow: hidden;
The easiest way to handle visual focus is to leave it for the browser to handle. This has many benefits:
- Users that rely on the visual focus, recognize it easily.
- You don't have to code anything.
- Users don't get any surprises.
Current standard - WCAG 2.1 Accessibility Insights for Web - Chrome extension (https://www.youtube.com/watch?v=XVvBJoEe4Is) Contrast ratio: https://www.siegemedia.com/contrast-ratio#
Class for screen readers only:
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}