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

Accessiblity #1331

Merged
merged 2 commits into from
Aug 15, 2024
Merged

Accessiblity #1331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
074aaa3
Accessiblity
pavpanchekha Aug 15, 2024
c9a71d4
More code fixes
pavpanchekha Aug 15, 2024
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
40 changes: 22 additions & 18 deletions book/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ Zoom

Let's start with the simplest accessibility problem: text on the
screen that is too small to read. It's a problem many of us will face
sooner or later, and possibly the most common user disability issue.
sooner or later, and is possibly the most common user disability issue.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO

The simplest and most effective way to address this is by increasing font
and element sizes. This approach is called *zoom*,[^zoom]\index{zoom}
which means to lay out the page as if all of the CSS sizes were increased or
Expand Down Expand Up @@ -226,7 +226,6 @@ class Tab:
# ...
self.zoom = 1

# ...
def zoom_by(self, increment):
if increment:
self.zoom *= 1.1
Expand Down Expand Up @@ -279,8 +278,10 @@ class DocumentLayout:
``` {.python}
class Tab:
def render(self):
# ...
if self.needs_layout:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO

# ...
self.document.layout(self.zoom)
# ...
```

Every other layout object can also have a `zoom` field, copied from
Expand Down Expand Up @@ -324,11 +325,13 @@ class BlockLayout:
# ...
px_size = float(node.style["font-size"][:-2])
size = dpx(px_size * 0.75, self.zoom)
# ...
Copy link
Collaborator Author

@pavpanchekha pavpanchekha Aug 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not the last line in the method

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO


def input(self, node):
# ...
# ...
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO

px_size = float(node.style["font-size"][:-2])
size = dpx(px_size * 0.75, self.zoom)
# ...
```

``` {.python expected=False}
Expand All @@ -337,6 +340,7 @@ class InputLayout:
# ...
px_size = float(self.node.style["font-size"][:-2])
size = dpx(px_size * 0.75, self.zoom)
# ...
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO

```

As well as the font size in `TextLayout`:[^min-font-size]
Expand Down Expand Up @@ -455,7 +459,7 @@ zoom-based scaling factors.
integer because that tends to make text and layout look crisper, but
this isn't required, and as pixel densities increase it becomes less
and less important. For example, the Pixelbook Go I'm using to write
this book, with a resolution of 166 pixels per inch has a ratio of
this book, with a resolution of 166 pixels per inch, has a ratio of
1.25. The choice of ratio for a given screen is somewhat arbitrary.

Dark Mode
Expand Down Expand Up @@ -781,7 +785,8 @@ background and lighter foreground. It should look like Figure 4 in dark mode.
:::

::: {.center}
![Figure 4: Example of dark mode with forms.](examples/example14-dark-mode-forms.png)
![Figure 4: Example of dark mode with forms. See the
`browser.engineering` website for full color.](examples/example14-dark-mode-forms.png)
:::

::: {.further}
Expand Down Expand Up @@ -1199,7 +1204,7 @@ def paint_outline(node, cmds, rect, zoom):
cmds.append(DrawOutline(rect, "black", 1))
```

Set this flag in a new `focus_element` method that we'll now use
Set this `is_focused` flag in a new `focus_element` method that we'll now use
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO

to change the `focus` field in a `Tab`:

``` {.python}
Expand Down Expand Up @@ -1415,7 +1420,7 @@ Unknown pseudoclasses simply never match anything.
The focused element can now be styled. But ideally we'd also be able to
customize the focus outline itself and not just the element. That can be done
by adding support for the CSS [`outline` property][outline], which looks like
this to show a 3px red outline:[^outline-syntax]
this (for a 3-pixel-thick red outline):[^outline-syntax]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO


outline: 3px solid red;

Expand Down Expand Up @@ -1482,10 +1487,10 @@ class LineLayout:
```

For the [focus example](examples/example14-focus.html), the focus outline
of an `<a>` element becomes red, as in Figure 6.
of an `<a>` element becomes thicker and red, as in Figure 6.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The red isn't visible in the book, but "thicker" is and they'll hopefully trust us on "red"


::: {.center}
![Figure 6: Example of a customized red focus outline.](examples/example14-focus-outline-custom.png)
![Figure 6: Example of a customized focus outline.](examples/example14-focus-outline-custom.png)
:::

As with dark mode, focus outlines are a case where adding an
Expand Down Expand Up @@ -1625,7 +1630,6 @@ class AccessibilityNode:
def __init__(self, node):
self.node = node
self.children = []
self.text = ""
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not used until later.

```

The `build` method on `AccessibilityNode` recursively creates the
Expand Down Expand Up @@ -1822,8 +1826,10 @@ and [`playsound`][playsound]. You can install them using `pip`:

[playsound]: https://pypi.org/project/playsound/

python3 -m pip install gtts
python3 -m pip install playsound
``` {.sh}
python3 -m pip install gtts
python3 -m pip install playsound
```
Comment on lines -1825 to +1832
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should not be an example style.


You can use these libraries to convert text to an audio file, and then
play it:
Expand Down Expand Up @@ -2145,7 +2151,7 @@ The `alert` role addresses this need. A screen reader
will immediately[^alert-css] read an element with that role, no matter
where in the document the user currently is. Note that there aren't
any HTML elements whose default role is `alert`, so this requires
setting the `role` attribute.
the page author to explicitly set the `role` attribute.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO


[^alert-css]: The alert is only triggered if the element is added to
the document, has the `alert` role (or the equivalent `aria-live`
Expand Down Expand Up @@ -2440,9 +2446,7 @@ class Browser:

By the way, the acronym `a11y` in `a11y_node`, with an "a", the number 11, and
a "y", is a common shorthand for the word "accessibility".[^why-11] The
`hit_test` function I'm calling is the same one we wrote
[earlier in Section 7.3](chrome.md#click-handling) to handle clicks, except
of course that it's searching a different tree:
`hit_test` function recurses over the accessibility tree:
Comment on lines -2443 to +2449
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is not similar! An earlier draft of the book used similar code, but now the A11y hit-test method is recursive while layout hit-test isn't.


[^why-11]: The number "11" refers to the number of letters we're
eliding from "accessibility".
Expand Down Expand Up @@ -2716,4 +2720,4 @@ property. This exposes the same functionality as the zoom
accessibility feature to web developers, plus it allows applying it only
to designated HTML subtrees.

[zoom-property] https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
[zoom-property] https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
39 changes: 3 additions & 36 deletions www/examples/example14-focus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,8 @@
<div role=textbox>custom contents</div>
<div tabindex=3>Tabbable element</div>
<script src="example14-focus.js"></script>
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br>
.
<br> . <br> . <br> . <br> . <br> . <br> .
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not critical IMO, but OTOH it does make the proof look a lot better...

<br> . <br> . <br> . <br> . <br> . <br> .
<br> . <br> . <br> . <br> . <br> . <br> .
<div tabindex=12>Offscreen</div>
<a href="http://browser.engineering">browser.engineering</a>
Loading