ThibWeb

Sorry I’m not sure I understand your question? I wasn’t on the internet before web 2.0, by modals I mean things like custom-styled <dialog> element[1] and the `dialog` ARIA role, which I would say are a more recent pattern than pop-up windows. "Modern" might not be the best term here, I should have just said more "usable" perhaps.

[1]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

Any particular styling extension you’d recommend? Have to confess I’ve only ever used the vanilla admin myself.

Text contrast is actually one of the most common issues with the Django admin. Just on the screenshot in the article, the white text against the light blue breadcrumb and nav headers background is too low contrast as per WCAG 2.0 calculations.

I’d say because you can lose context more easily when having to move to a separate browser tab / window to complete a task? And I suspect the multi-window paradigm is also harder to navigate for keyboard / screen reader users (as opposed to an in-page modal which correctly captures the keyboard focus while open).

Yep, the different button styles for no clear reasons is one. This is even more apparent on other views. On that screenshot, you can also spot questionable alignment between e.g. checkboxes and the title text in the table. Contrast issues with text against different background colors. And I’d also question whether UPPER CASE TEXT is necessary.

It is certainly simple but I’d disagree it’s functional _enough_, because of the numerous basic accessibility issues with the fundamental UI components.

On extending the admin – perhaps there’s something to be said about the admin coming with more UI components built-in? For example it lacks any dialog / modal window implementation, or an "accordion" / disclosure pattern. Or things like support for keyboard shortcuts.

"Ugly" might not be the best one-word description but there are a lot of basic accessibility issues with the Django admin. The general user experience could also really benefit from using more modern design patterns (for example modal windows over pop-up windows).

I’d be really interested in this as well (disc. – I work on Wagtail). This feels so similar to our vision for the CMS aside for the fact the project has been running for a while and is in Python land.

Wagtail core developer here – here are our sprint notes [1] that demonstrate what this funding means for us in practice. The TL;DR; is being able to address long-term technical debt in the UI, improving accessibility throughout, having proper UI customization capabilities – as part of a redesign & new features.

[1]: https://github.com/wagtail/wagtail/discussions/7739

I share the same sentiment, but it would be even better if what’s shared was more factual / less dogmatic – or in this case if sourcehut itself was a better example. At a high level it’s somewhat correct that sticking to HTML-only features is better, but otherwise there are a lot of issues with the specific guidance in the post:

> Don’t use JavaScript to create custom input elements like text boxes

Sure. But some JavaScript would be valuable, for example to display validation errors without a full page reload (try typing special characters in https://git.sr.ht/create). This means screen reader / keyboard users have to navigate back through the page, to the field, and discover what the error is. A skip link would be nice too, that only takes HTML.

> A good way of simulating the screen reader experience is to view your page with Lynx. Conveniently, Lynx does not support JavaScript.

Please don’t waste time in Lynx if you want to simulate the screen reader experience – if you’re knowledgeable enough to have Lynx installed and use it, you can learn to use a screen reader. There are good, free ones with every OS these days. They are much more capable than Lynx, and support JavaScript just fine.

> Avoid littering marketing garbage, superlatives, and ads for other parts of the site (or even ads outright) throughout your page, as skipping these is more difficult for a screen reader than for the typical visitor.

If your ad is wrapped in a `<section aria-label="My ad">` or aside, then it should be very easy to skip.

The general guidance here is to focus on plain language. Sourcehunt should avoid error messages like "Name must match [A-Za-z._-][A-Za-z0-9._-]*"

> In summary, if you want to get accessible quick, a good start for your new website might eschew npm install in favor of this:

Please update this template to have the `html` element with its `lang` attribute defined. Not having "lang" defined means screen reader users have the page read out in their browser’s default language, rather than the page’s language, which can make the content unintelligible.