accessibilityeducation.github.io/textanalysisinfo.html at master · accessibilityeducation/accessibilityeducation.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Braille Dictionary</title>
    <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
</head>

<body>
    <!-- Navigation-->
    <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
        <div class="container px-4 px-lg-5">
            <a class="navbar-brand" href="index.html">Including A11y in CS</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto py-4 py-lg-0">
                     <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="publications.html">Publications</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="workshopsHomepage.html">Workshops</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="resources.html">Resources</a></li>
                        <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Page Header-->
    <header class="masthead">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="post-heading">
                        <h1>Braille Text Analysis</h1>
                        <p class="subheading">Students will use string manipulations, turtles, lists, and dictionaries to collect and analyze braille text</p>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Post Content-->
    <article class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">

  <img src="assets/img/screen-reader.png" alt="A person sitting in front of a laptop and braille display. The person is wearing headphones connected to the laptop and is using their hands to touch and read the braille display.">
        <p>(Figure 1) Person using a screen reader, by <a href="https://stock.adobe.com/contributor/200852236/elypse">Elypse at stock.adobe.com</a></p><br/>
        <img src="assets/img/braille-display.png" alt="A braille display with keypads. The keypads are arranged in an ergonomic fashion such that the keys are angled the way hands naturally rest." style = "width:500px;height:333px;">
        <p>(Figure 2) An example of a braille display, from <a href="https://www.pattan.net/Short-Term-Loan/BRAILLIANT-BI-14-BRAILLE-DISPLAY">PaTTAN</a></p><br/>
        <p>Braille was also the first writing system with binary encoding.
            The system as devised by Louis Braille consists of two parts:</p>
        <ul>
            <li>Character encoding that mapped characters of the alphabet to arrays of six bits.</li>
            <li>The physical representation of those six-bit characters with raised dots in a braille cell.</li>
        </ul>
        <p>Within an individual cell, the dot positions are arranged in a three by two grid.
            A raised dot can appear in any of the six positions, producing sixty-four possible patterns,
            including one in which there are no raised dots. </p>

        <p>A braille letter is commonly described by listing the positions where dots are raised.
            The positions are universally numbered, from top to bottom, as 1 to 3 on the left column and 4 to 6 on the right column.
            For example, dot pattern 1-3-4 describes a cell with three dots raised at the top and bottom of the left column and at
            the top of the right column: the letter “m” ⡉ </p>

        <p>The following describes some patterns within grade 1 braille:</p>
        <ol>
            <li>The first ten letters of the alphabet, “a-j”, use the upper four dot positions:
                <br> <b>⠁⠃⠉⠙⠑⠋⠛⠓⠊⠚ </b>(black dots in the table below).</li>
            <li>The next ten letters, “k-t”, are similar to “a-j” with an addition of a dot at position 3:
                <br> <b>⠅⠇⠍⠝⠕⠏⠟⠗⠎⠞ </b>(red dots in the table below)</li>
            <li>The next ten letters (the next "decade") are the same again, but with dots also at positions 3 and 6 (green dots in the table below).
                Here “w” was left out as it was not a part of the official French alphabet during the time Louis Braille was alive.</li>
            <li>A space in braille is represented by a cell with no dots raised.</li>
        </ol>

        <img src="assets/img/braille.png" alt="Table showing the language of braille, color coded to demonstrate the differences between decades.">
        <p>(Figure 3) </p>
        <p>Grade 2 braille is just like grade 1 braille, except there are extra braille representations for commonly used words
            (“for,” “the,” “will”) and letter combinations (“th,” “-ing,” “st”).
            This makes grade 2 braille a popular choice in most publications as it shortens the number of pages.
            Here the keys should be strings corresponding to the word (e.g. “us”).
            <b> Note that the final word should actually be “will” not “wil”.</b></p>
        <img src="assets/img/braille-words.png" alt="A chart of braille representations for commonly used words, including but, can, do, every, and other words.">
        <p>(Figure 4) Examples of abbreviated braille words, from <a href="http://www.blog.contactlensking.com/How-To-Read-Braille-Alphabet.php">ContactLensKing</a></p><br/>
            <p>The skeleton code contains a braille_dictionary that contains the braille representations of the
                alphabet a-z, the numbers 0-9, the space, and grade 2 braille.
                The keys in the dictionary correspond to the ASCII characters and the values are their Braille representation.
                The Braille representation is a list of 1's and 0's  with raised dots represented as 1's and flat dots represented as 0's.
                For example, the key “n” in the dictionary corresponds to the value: [1,0,1,1,1,0].
                Note that the numbering starts in the upper left of the braille cell and goes down column one and then column 2.</p>
            </body>
        </html>