Figures

Index

  1. Chapter 1
  2. Chapter 2
  3. Chapter 3
  4. Chapter 4
  5. Chapter 5
  6. Chapter 6
  7. Chapter 7
  8. Chapter 8
  9. Chapter 9
  10. Chapter 10
  11. Chapter 11
  12. Chapter 13

Chapter 1

Figure 1 All tabs are labeled “Johanna’s Toy Store”.

Figure 2 3 tabs labeled Products, Our Team, and Get in Touch.

Figure 3 3 tabs labeled Products, Our Team, and Get in Touch. Each has a suffix “- Johanna’s Toy Store”.

Figure 4 3 tabs labeled Products, Our Team, and Get in Touch. Each has a prefix “Johanna’s Toy Store - ”.

Figure 5 A list of messages, each with a thick border with different styles and colors indicating a success, warning or error.

Figure 6 A pink outline around the main element and a label “main” in the top right corner.

Chapter 2

Figure 1 3 links horizontally aligned and separated by a right chevron at the top left of the page.

Figure 2 Two column layout: on the right the main content and on the left a list with anchor links.

Figure 3 Dev Tools in Chrome showing the search role on the form element of the page search.

Figure 4 6 landmarks in total: banner, navigation, main, navigation, navigation, and content information.

Figure 5 6 landmarks: banner, main navigation, main, page navigation, select page navigation and content information

Figure 6 Multiple nested sections, each with an h1. The h1 in the third section selected in the element's panel with the accessibility pane open.

Figure 7 3 articles: “unlabelled”, “Labelled by heading”, and “labelled by attribute”

Figure 8 Dark background with white text. 3 sections: “Progressive enhancement,” “Fluid type and space,” and “Flexible layouts”.Large type for the headings and a combination of illustrations and text below.

Figure 9 7 headings: 1 Personal Services, 2 Accounts, 2 Payment Methods, 2 Investments, 2 Personal Loans, 2 Wealth Planning, 2 Other Services.

Figure 10 A teaser component containing an image followed by a heading, the name of the author, a short paragraph and a link that says read When CSS isnt enough.

Chapter 3

Figure 1 Excerpt of all links on the home page. 5 times 'shop now', 7 times 'read the story'. Each product on the page uses 2 or 3 links.

Figure 2 Grayscale screenshot of a wikipedia page with many links.

Figure 3 A paragraph with a link shown as blue, underlined text.

Figure 4 A variate of styles used on different elements: Outlines and background color with outlines.

Figure 5 Comparison of links in a footer in regular and high contrast mode on Windows 11.

Figure 6 'Download the sustainibility report 2022 (PDF, 29MB)' with a downwards pointing arrow icon on the right

Figure 7 3 paragraphs, one containg a link to a pdf. It shows the file type, size, and a blank page icon

Figure 8 new mail with the subject 'Support enquiry #123' and body text 'Customer number: 068303'

Figure 9 The St. Charles Church in Vienna, a baroque building containing a dome and two columns.

Figure 10 Turquoise headphones on a pink-turquoise background.

Figure 11 rectangle with an arrow pointing from the inside out

Figure 12 A teaser component containing an image followed by a heading, the name of the author, a short paragraph and a link that says read When CSS isnt enough.

Figure 13 Visual comparison of the cards illustrating the layers on the z axis.

Chapter 4

Figure 1 The button looks like regular text written in a serif font

Figure 3 A green button with rounded corners. A white circle inside it, aligned to the right indicating is switched on. Text 'functional cookies' outside, on the right of the button.

Chapter 5

Figure 1 The combination #3D7F66 against #FFF passes double A criteria for normal text.

Figure 2 Dev Tools open open on cssday.nl. Elements panel, styles pane and a tooltip visible. The color passes double criteria.

Figure 3 Grayscale screenshot of a wikipedia page with many links.

Figure 4 Screenshot of the support chart for the relative color syntax in css on caniuse.com

Figure 5 An invalid e-mail address field with a error message that says 'Please enter a valid e-mail address' next to an x icon.

Figure 6 the default theme uses black text und white background color. in darkmode it's flipped.

Figure 7 Matthias Otts personal site on Windows. The site's background is black, just like the entire UI of the operating system.

Figure 8 A website with a white background turned dark. The colors in a background image at the top of the page are also inverted.

Figure 9 A comparisson of the same dialog on macOS. In the first you can see the background shinning through and the second has a solid background color.

Figure 10 Fonts settings in Google Chrome on the left, a simple paragraph on the right.

Figure 11 Fonts settings in Google Chrome on the left, a simple paragraph on the right.

Figure 12 Fonts settings in Google Chrome on the left, a simple paragraph on the right.

Figure 13 3 differently sized buttons, from small to large.

Figure 14 Three two column layouts at a viewport width of 1280px and 100% zoom.

Figure 15 Three single column layouts at a viewport width of 1280px and 150% zoom.

Figure 16 Two single column layouts at a viewport width of 1280px 100% zoom, and a base font size of 22px.

Figure 17 Only a portion of the screen is visible.

Figure 18 Colorful prominent illustrations filling almost the entire screen

Chapter 6

Figure 1 A button with a thin blue outline and a button with a thick black outline and padding between the buttons edges and the outline

Figure 2 Chromes uses a blue and white outline, Safari only blue, barely visible, Firefox white and blue and Edge only white.

Figure 3 A list of links. The focused link shows a yellow background color and thick black underline.

Figure 4 Comparison of the navigation on asmonaco.com in normal and high contrast mode.

Figure 5 List of links on gov.uk. One link focused showing an outline.

Figure 6 A simple list with three links, labeled One, Two, and Three. The visual order is: One, Two, Three.

Figure 7 The same list as before, but now the visual order is: Three, One, Two.

Figure 8 A grid layout with differently sized teaser components. Focus starts at the top of the page, jump way down to the footer, then backup, traverses several until is jumps back up again.

Figure 9 mit.edu homepage

Figure 10 A skip link at the top left of the page labelled 'accessibility help'

Figure 11 A 2-column layout. More than thirty links in the left column.

Figure 12 A hidden skip link before an embedded map.

Chapter 7

Figure 1 Four links. Focused link with a thick blue outline with enough padding.

Figure 2 3 columns of links. Some of them even with short descriptions.

Figure 3 Different color and an underline.

Figure 4 Comparison of the navigation in two different modes.

Figure 5 Thick underline in the default theme visible, in high contrast mode it's not. You can't tell which items is focused.

Figure 6 Warning: The list role is unnecessary for element ul

Figure 7 banner, navigation, main, content information

Figure 8 6 landmarks: banner, main navigation, main, page navigation, select page navigation and content information

Figure 9 There are a menu button, a search button, a language selection, and other links. Each tab stop annotated with a number in a circle.

Figure 10 Simple main navigation demo. 3 links, 2 buttons followed by links in a navigation.

Figure 11 Same demo as before but now a “Jump to navigation” link overlays the links.

Figure 12 The list is aligned to the top right and overlays the rest of the content. Text is hard to read because it has no background color.

Figure 13 The list looks like a sidebar that overlays the content. A background color and subtle box shadow raise it from the rest of the page.

Figure 14 The nav containing a burger button and the list of links.

Figure 15 Sidebar with address bar and tabs on the left. beyondtellerrand.com in the middle and Michel Barker’s website on the right.

Figure 16 Rendering drawer open and “Emulate CSS feature prefers-reduced-motion” selected. Two options visible: No emulation and prefers-reduced-motion: reduce.

Figure 17 All links look the same. “Products” shows an additional icon, a down pointing triangle in a circle.

Figure 18 Products sub menu open below the link and button. Options: Electronics, Sports and Outdoors, Toys. Displayed with white background color and a subtle gray box shadow.

Figure 19 The “Products” button looks like a link. Submenu visible below. In addition to the 3 submenu links there's another link “All Products” compensating for the missing link.

Chapter 8

Figure 1 closed: a right pointing triangle on the left of the “Show details” summary. open: triangle now pointing down and text visible below.

Figure 2 Comparison of Chrome (left) and Firefox. Search for the term 'cook' shows two results in Chrome, details element opened by the browser. Firefox only shows one result, details element closed.

Figure 3 Nested accordions with 5 buttons on the first level. One of them, ”Help Desk”, expanded. Inside it are 4 buttons, styled differently. First “When an how can I contact you?” expanded.

Figure 4 Rotor in VoiceOver listing two landmarks: Frequently asked questions region and second question region.

Chapter 9

Figure 1 Two text inputs followed by a fieldset

Figure 2 A switch toggle with a green background color. The knob is on the right and on the left it says ON.

Figure 3 A form with two input fields: label followed by an underlined placeholder text. the input field doesn't look like a box.

Figure 4 The comma button in the layout for normal text inputs is replaced by an at-sign in email layouts and a slash in url layouts. text is by default uppercase in text inputs. tel inputs only show numbers and permitted special characters.

Figure 5 A sign up form with 4 form items and a submit button. there are no labels making it impossible to identify the fields.

Figure 6 Three columns: username, name, level. first row with filled-out fields. second row with empty fields.

Figure 7 the label username following by a textbox

Figure 8 A textbox with no label. Light gray text inside the box: date of birth (format: dd.mm.yyyy)

Figure 9 Date of birth in the top left corner of the input field in small type.

Figure 10 The label password followed by instructions and the input field

Figure 11 An invalid e-mail address field with a error message that says 'Please enter a valid e-mail address' next to an x icon.

Figure 12 Two radio buttons with the labels yes and no visually grouped in a fieldset with a border. The legend is placed on top of the top border, aligned to the left.

Figure 13 4 numbered steps: shipping address, payment, review order, and finish. payment highlighted.

Figure 14 Descriptions and information about preperations before you fill out the form, and a start now button.

Chapter 10

Figure 1 An artist select element, a fieldset with 5 country options, a fieldset with 4 shipping options

Figure 2 10 results followed by 4 link buttons. first button highlighted.

Figure 3 Flyout menu on the right side of the screen showing all filters in an accordion.

Figure 4 A column with all options on the left and results on the right.

Chapter 11

Figure 1 9 Rows in a simple table with 3 columns: name, score, country

Figure 2 A table with 4 columns: name, q1,q2,q3,q4. column headers labelling columns and row header in the name column labelling rows.

Figure 3 A table with 3 columns: name, score, country. Next to the label in each table header you see an up and down point triangle with a black stroke and no fill.

Figure 4 The down-pointing triangle of the score column filled with color.

Chapter 13

Figure 1 7 issues reported and a list of all issues

Figure 2 A score of 59 and a list of all issues

Figure 3 Icons in different colors highlighting different elements on the page.

Figure 4 A list of errors and warning, with descriptions

Figure 5 A list of errors and warning, with descriptions

Figure 6 An h2 with the text 'about' highlighted in the DOM view. The accessibility pane shows it as 'heading about statictext about'

Figure 7 An h2 with the text 'about' highlighted in the DOM view. The accessibility pane shows it as 'heading about statictext about'

Figure 8 The accessibility tree on the left. Detailed states and properties on the right.

Figure 9 The Elements panel open in Chrome DevTools. The inspection icon active and an input hovered with a tooltip showing accessibility information.

Figure 10 The Accessibility panel open in Firefox DevTools. The inspection icon active and an input hovered with a tooltip showing accessibility information.

Figure 11 An input field selected in the elements panel and information about its name, role, states, and properties listed in the accessibility panel.

Figure 12 Five visually identical buttons

Figure 13 Each link gets a number based on its appearance in the DOM. Numbers are connected through lines.

Figure 14 Options to emulate color-scheme, media type, forced-colors, contrast, reduced motion, reduced-transparency, and color gamut.

Figure 15 A popover showing options to change the colour scheme, reduce motion and increase contrast.

Figure 16 A list of different color blindesses, types of low vision and other options like bright sunshine or night mode.

Figure 17 A list of snippets on the left, and the code of the current snippet on the right.

Figure 18 Listed: The title of the page, description, natural language, charset, viewport, canonical url, number of DOM nodes, and more.