Add aria-live tests

master
Tait Hoyem 3 years ago
parent 9910b2dbd0
commit 15f81774c2

@ -55,4 +55,9 @@ And now Orca will be activated on boot and login.
## AUR
To get the AUR working, we need to install the `pacaur` helper.
This merited its own article, so check that out here:
[How to Install Pacaur on Manjaro ARM](/2020/12/01/pacaur-rpi.html)
##

@ -1,3 +1,3 @@
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Orca, Emacspeak and Chromium Accessibility on A Raspberry Pi Running Manjaro ARM | tait.tech</title> <link rel="stylesheet" href="/assets/css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Tait Hoyem"> <meta name="keywords" content="orca linux raspberry-pi rpi raspberry pi screen reader screen-reader 64 bit 64-bit 64bit aarch64 emacs emacspeak manjaro manjaro-arm manjaro-aarch64"> <meta name="description" content=""> </head> <body> <div id="wrapper"> <header> <nav> <input type="checkbox" id="menu"> <label for="menu">&#9776;</label> <div class="menu-content"> <a href="/" class="nav-link">Home</a> <a href="/blog/" class="nav-link">Blog</a> <a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer">Github</a> </div> </nav> </header> <main> <article> <header> <h1 class="post-title">Orca, Emacspeak and Chromium Accessibility on A Raspberry Pi Running Manjaro ARM</h1> <time datetime="" class="post-date"></time> </header> <hr> <p>I wanted to get a gift for my blind friend who has been interested in learning Linux for a while now. Just when I was about to start looking for a gift I decided to take a look at <a href="https://lbry.tv/@Lunduke:e/raspberry-pi-400-looks-rad:c">Brian Lundukes newest video</a> featuring the <a href="https://www.raspberrypi.org/products/raspberry-pi-400/?resellerType=home">Raspberry Pi 400</a>. The Raspberry Pi 400 has come full circle in terms of computing. It is a keyboard. All the computing is done from within the keyboard. Much like the Comodore64, this computer comes without a screen but is still technically fully functional without one. I had my Aha! moment and decided that could be a very cool gift.</p> <h2 id="distribution">Distribution</h2> <p>I wanted to choose something which will age well, and run the latest and greatest. Some Raspberry Pi Orca installation guides <a href="https://techesoterica.com/getting-the-orca-screen-reader-working-on-a-raspberry-pi-4-with-raspbian-buster-and-the-mate-desktop/">like this one</a>, have actually asked the user to <em>compile from source</em> to get the latest Orca version due to how out-of-date Debians package repositories are. A distribution which has none of these fusses was top priority, especially because Orca receives a lot of updates and it would make sense to not lag behind for the most critical piece of software.</p> <p>I decided to go with <a href="https://manjaro.org/download/#raspberry-pi-4-xfce">Manjaro ARM Xfce</a>:</p> <ul> <li>Xfce is lightweight (especially good for a VI user who will be using the screen reader).</li> <li>Runs the 64-bit kernel instead of Raspberry Pi OSs 32-bit kernel.</li> <li>Is based on Arch Linux, so receives very frequent package updates.</li> <li>Has the AUR (<a href="#aur">with some effort</a>, as well see).</li> </ul> <p>The only downside of Manjaro ARM, and likewise other Aarch64 architecture kernels is that it did not have HEVC nor H264 hardware decoding available. Apparently this is getting mainlined in Linux kernel 5.10, but I still dont quite understand how it works as using 5.10-rc4 did not activate it. I suppose time will tell by end of year how this will be implemented.</p> <h2 id="orca">Orca</h2> <p>The minimum requirement for a visually impaired desktop Linux user is a screen reader. The most used screen reader for Linux is Orca, headed by the <a href="https://wiki.gnome.org/Projects/Orca">GNOME Project</a>. This is relatively easy to install with standard <code class="language-plaintext highlighter-rouge">pacman</code> commands.</p> <pre class="terminal">
# pacman -S orca
</pre> <p>If logged in via SSH, you can start Orca with the <code class="language-plaintext highlighter-rouge">orca</code> command. This will start reading the screen to you so you can do the next parts.</p> <p>To activate Orca on login and on LightDM activation, add it to the LightDM GTK+ Greeter Settings application on the Misc. menu. This will start it when the LightDM login system starts.</p> <p>LightDMs Orca will not help us once we are logged in however. To activate Orca on login, open the Session And Startup application, and add Orca to the “startup” list of apps.</p> <h3 id="todo-add-commands">TODO: add commands</h3> <p>And now Orca will be activated on boot and login.</p> <h2 id="aur">AUR</h2> </article> </main> <hr> <footer> This page is mirrored on <a href="https://beta.tait.tech/2020-11-27-orca-raspberry-pi-aarch64.html">beta.tait.tech</a>. </footer> </div> </body> </html>
</pre> <p>If logged in via SSH, you can start Orca with the <code class="language-plaintext highlighter-rouge">orca</code> command. This will start reading the screen to you so you can do the next parts.</p> <p>To activate Orca on login and on LightDM activation, add it to the LightDM GTK+ Greeter Settings application on the Misc. menu. This will start it when the LightDM login system starts.</p> <p>LightDMs Orca will not help us once we are logged in however. To activate Orca on login, open the Session And Startup application, and add Orca to the “startup” list of apps.</p> <h3 id="todo-add-commands">TODO: add commands</h3> <p>And now Orca will be activated on boot and login.</p> <h2 id="aur">AUR</h2> <p>To get the AUR working, we need to install the <code class="language-plaintext highlighter-rouge">pacaur</code> helper. This merited its own article, so check that out here:</p> <p><a href="/2020/12/01/pacaur-rpi.html">How to Install Pacaur on Manjaro ARM</a></p> <p>##</p> </article> </main> <hr> <footer> This page is mirrored on <a href="https://beta.tait.tech/2020-12-02-orca-raspberry-pi-aarch64.html">beta.tait.tech</a>. </footer> </div> </body> </html>

File diff suppressed because one or more lines are too long

@ -0,0 +1,2 @@
11:40 Teeth consolt; $150 w/o insurance
market mall brown building, Buerau oral surgery

@ -1 +1 @@
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>/2020/01/22/padding-and-margin.html</loc> <lastmod>2020-01-22T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/01/26/rsa1.html</loc> <lastmod>2020-01-26T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/02/19/rsa2.html</loc> <lastmod>2020-02-19T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/04/02/rsa3.html</loc> <lastmod>2020-04-02T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/06/rsa4.html</loc> <lastmod>2020-04-06T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/12/nas1.html</loc> <lastmod>2020-04-12T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/21/rfi.html</loc> <lastmod>2020-04-21T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/25/xss.html</loc> <lastmod>2020-04-25T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/05/01/nginx-socket-io-projects.html</loc> <lastmod>2020-05-01T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/05/19/clue-announcement.html</loc> <lastmod>2020-05-19T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/06/04/site-update.html</loc> <lastmod>2020-06-04T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/06/25/tmux-minecraft.html</loc> <lastmod>2020-06-25T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/07/12/independence.html</loc> <lastmod>2020-07-12T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/07/19/multicraft-php-gentoo.html</loc> <lastmod>2020-07-19T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/07/30/canadian-parliament.html</loc> <lastmod>2020-07-30T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/08/15/openbsd1.html</loc> <lastmod>2020-08-15T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/08/18/django-deployment.html</loc> <lastmod>2020-08-18T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/09/09/lamegames.html</loc> <lastmod>2020-09-09T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/09/12/minesweeper.html</loc> <lastmod>2020-09-12T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/10/26/curiosity.html</loc> <lastmod>2020-10-26T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/11/15/nas2.html</loc> <lastmod>2020-11-15T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/12/01/pacaur-rpi.html</loc> <lastmod>2020-12-01T00:00:00-07:00</lastmod> </url> <url> <loc>/2020-04-27-quiz-your-friends-xss.html</loc> </url> <url> <loc>/2020-11-27-orca-raspberry-pi-aarch64.html</loc> </url> <url> <loc>/blog/</loc> </url> <url> <loc>/tests/chess/</loc> </url> <url> <loc>/</loc> </url> <url> <loc>/tutoring/</loc> </url> <url> <loc>/cover-letters/bloombase/</loc> </url> <url> <loc>/resume/</loc> </url> <url> <loc>/links/</loc> </url> <url> <loc>/cover-letter-vcc/</loc> </url> <url> <loc>/contact/</loc> </url> <url> <loc>/about/</loc> </url> <url> <loc>/scholarships/2020/cnib/</loc> </url> <url> <loc>/test.html</loc> </url> <url> <loc>/test2.html</loc> </url> </urlset>
<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>/2020/01/22/padding-and-margin.html</loc> <lastmod>2020-01-22T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/01/26/rsa1.html</loc> <lastmod>2020-01-26T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/02/19/rsa2.html</loc> <lastmod>2020-02-19T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/04/02/rsa3.html</loc> <lastmod>2020-04-02T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/06/rsa4.html</loc> <lastmod>2020-04-06T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/12/nas1.html</loc> <lastmod>2020-04-12T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/21/rfi.html</loc> <lastmod>2020-04-21T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/04/25/xss.html</loc> <lastmod>2020-04-25T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/05/01/nginx-socket-io-projects.html</loc> <lastmod>2020-05-01T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/05/19/clue-announcement.html</loc> <lastmod>2020-05-19T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/06/04/site-update.html</loc> <lastmod>2020-06-04T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/06/25/tmux-minecraft.html</loc> <lastmod>2020-06-25T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/07/12/independence.html</loc> <lastmod>2020-07-12T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/07/19/multicraft-php-gentoo.html</loc> <lastmod>2020-07-19T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/07/30/canadian-parliament.html</loc> <lastmod>2020-07-30T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/08/15/openbsd1.html</loc> <lastmod>2020-08-15T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/08/18/django-deployment.html</loc> <lastmod>2020-08-18T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/09/09/lamegames.html</loc> <lastmod>2020-09-09T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/09/12/minesweeper.html</loc> <lastmod>2020-09-12T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/10/26/curiosity.html</loc> <lastmod>2020-10-26T00:00:00-06:00</lastmod> </url> <url> <loc>/2020/11/15/nas2.html</loc> <lastmod>2020-11-15T00:00:00-07:00</lastmod> </url> <url> <loc>/2020/12/01/pacaur-rpi.html</loc> <lastmod>2020-12-01T00:00:00-07:00</lastmod> </url> <url> <loc>/2020-04-27-quiz-your-friends-xss.html</loc> </url> <url> <loc>/2020-12-02-orca-raspberry-pi-aarch64.html</loc> </url> <url> <loc>/blog/</loc> </url> <url> <loc>/tests/live-label/</loc> </url> <url> <loc>/tests/chess/</loc> </url> <url> <loc>/</loc> </url> <url> <loc>/tutoring/</loc> </url> <url> <loc>/cover-letters/bloombase/</loc> </url> <url> <loc>/resume/</loc> </url> <url> <loc>/links/</loc> </url> <url> <loc>/cover-letter-vcc/</loc> </url> <url> <loc>/contact/</loc> </url> <url> <loc>/about/</loc> </url> <url> <loc>/scholarships/2020/cnib/</loc> </url> <url> <loc>/test.html</loc> </url> <url> <loc>/test2.html</loc> </url> </urlset>

@ -0,0 +1 @@
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test ARIA-live region with label | tait.tech</title> <link rel="stylesheet" href="/assets/css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="Tait Hoyem"> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> <div id="wrapper"> <header> <nav> <input type="checkbox" id="menu"> <label for="menu">&#9776;</label> <div class="menu-content"> <a href="/" class="nav-link">Home</a> <a href="/blog/" class="nav-link">Blog</a> <a href="https://github.com/TTWNO/" class="nav-link" target="_blank" rel="noopener noreferrer">Github</a> </div> </nav> </header> <main> <div id="test-aria" aria-live="polite" aria-label="Test label"> I am some text. </div> <button id="btn">Update labled ARIA region.</button> <button id="btn2">Delete text</button> <p>Test</p> <script>ALDIV=document.getElementById("test-aria"),NEW_TEXT="new text;",UPDATE_BTN=document.getElementById("btn"),DELETE_BTN=document.getElementById("btn2"),UPDATE_BTN.addEventListener("click",function(){ALDIV.innerText="Updating... Hello world!"}),DELETE_BTN.addEventListener("click",function(){ALDIV.innerText=""});</script> </main> <hr> <footer> This page is mirrored on <a href="https://beta.tait.tech/tests/live-label/">beta.tait.tech</a>. </footer> </div> </body> </html>

@ -0,0 +1,2 @@
11:40 Teeth consolt; $150 w/o insurance
market mall brown building, Buerau oral surgery

@ -0,0 +1,24 @@
---
title: "Test ARIA-live region with label"
layout: default
---
<div id="test-aria" aria-live="polite" aria-label="Test label">
I am some text.
</div>
<button id="btn">Update labled ARIA region.</button>
<button id="btn2">Delete text</button>
<p>Test</p>
<script>
ALDIV = document.getElementById("test-aria");
NEW_TEXT = "new text;";
UPDATE_BTN = document.getElementById("btn");
DELETE_BTN = document.getElementById("btn2");
UPDATE_BTN.addEventListener('click', function(e) {
ALDIV.innerText = 'Updating... Hello world!';
});
DELETE_BTN.addEventListener('click', function(e) {
ALDIV.innerText = '';
});
</script>
Loading…
Cancel
Save