Discussion on: Checklist: 56 guiding questions about web accessibility

View post

Great post, I have a lot to check, what do you recommend to deal with big tables on mobile, seems like horizontal scrolling is unavoidable. I understand most people consume information on their phones but should we just have to acknowledge that phones are not well suited for all content?.

Sylwia Vargas • Apr 21 '20

I really love your comment — thank you! I love it because to be honest, I never had to think about big tables so I learned something right now. I found this post that speaks about Shopify's UX in this respect: ux.shopify.com/lessons-from-buildi...
Let me know what you think!

Ghost • Apr 21 '20

wow, thanks a lot, looks great, I'll check it out in detail, I'm not a front-end myself but once in a while I have to delve in those waters. I like clean and simple and don't mind keeping things old school and avoid JS as far as possible and frameworks only as a last resource; right now I'm working in a SSR web UI for an application and my solution to big tables was similar to one of the examples in the site you shared, to hide columns without CSS, and it took me a couple of hours to make drop-downs without JS nor :hovers (damned touchscreens), I was kinda proud of it :) (as I said, I'm more of a back-end/embedded kinda fellow). I think your link will make my humble application better.

Sylwia Vargas • Apr 21 '20

WOW! Please share the link (to the website and/or github) if you can! I'm so curious! All this sounds great.

Ghost • Apr 21 '20

It's not up yet, but is nothing fancy, just something like:

    <label for="someid">visible text or button</label>
    <input id="someid" class="hidden" type="checkbox">
    <div>
        <ul>
            <li>some item of the menu</li>
            ...
        </ul>
    </div>

I'm conflicted if those divs should be aside.

.hidden {
    display: none;
    visibility: hidden;
}

#the-menu { display: none; }
#someid:checked ~ #the-menu { display: block; }

The idea is to take advantage of the :checked and the ~ in css

About the tables, is similar but using the column table element to toggle visibility: collapse

Besides adding a hidden I think it doesn't muddy the html or css much, if you are hidding a lot of columns you can get something not that pretty like:

   ...

    <label for="togglebtn1">Razón social</label>
    <label for="togglebtn2">Tipo</label>
    <label for="togglebtn3">Rut</label>
    <label for="togglebtn4">Rubro</label>
    <label for="togglebtn5">Url</label>
    <label for="togglebtn6">Horario</label>
    <label for="togglebtn7">Comentario</label>
    <label for="togglebtn8">Estado</label>
    <label for="togglebtn9">Acciones</label>

    <section>
        <input class="hidden" id="togglebtn1" type="checkbox">
        <input class="hidden" id="togglebtn2" type="checkbox">
        <input class="hidden" id="togglebtn3" type="checkbox">
        <input class="hidden" id="togglebtn4" type="checkbox">
        <input class="hidden" id="togglebtn5" type="checkbox">
        <input class="hidden" id="togglebtn6" type="checkbox">
        <input class="hidden" id="togglebtn7" type="checkbox">
        <input class="hidden" id="togglebtn8" type="checkbox">
        <input class="hidden" id="togglebtn9" type="checkbox">

        <table>
            <colgroup>
                <col span="2">
                <col class="toggle1">
                <col class="toggle2">
                <col class="toggle3">
                <col class="toggle4">
                <col class="toggle5">
                <col class="toggle6">
                <col class="toggle7">
                <col class="toggle8">
                <col class="toggle9">
            </colgroup>

            <thead>
                <tr>
                    <th>Condominio</th>
                    ...

But all in all, I avoided JS, works fast, doesn't add much html or css and is just a visual aid, shouldn't mess with screen readers or other devices, even without css the result is readable enough. I hope it helps.

Sylwia Vargas • Apr 21 '20

WOW I love this so much! What a great resource. This is really awesome. Thank you!