docs(ui): Improved accessibility

doc/README.md

@@ -63,7 +63,7 @@ Flame doesn't bundle any network feature, which may be needed to write online mu
 
 If you are building a multiplayer game, here are some recommendations of packages/services:
 
-- [Nakama](https://github.com/obrunsmann/flutter_nakama/): Nakama is an open-source server designed
+- [Nakama](https://github.com/obrunsmann/flutter_nakama/): An open-source server designed
  to power modern games and apps.
 - [Firebase](https://firebase.google.com/): Provides dozens of services that can be used to write
 simpler multiplayer experiences.

doc/_sphinx/theme/flames.css

@@ -20,8 +20,8 @@
 }
 
 body {
-  background-color: #484848;
-  color: #b8b8b8;
+  background-color: #383838;
+  color: #cccccc;
   font-family: var(--font-sans);
   font-size: 15px;
   line-height: 1.5;
@@ -32,14 +32,18 @@ body {
 }
 
 a {
-  color: #ffbb3e;
+  color: #ff9500;
   text-decoration: none;
 }
 
 a:hover {
   color: #ddbb99;
 }
 
+a:visited {
+  color: #ffbc70;
+}
+
 a:hover code {
   color: white;
 }
@@ -69,7 +73,7 @@ code {
 
 code.xref {
   background: none;
-  color: #f75151;
+  color: #ff9500;
   padding: 0;
 }
 
@@ -84,6 +88,7 @@ strong {
   color: white;
 }
 
+
 div.expander {
   flex: 1;
 }
@@ -140,7 +145,7 @@ div.top-bar .btn {
   background-color: transparent;
   border: none;
   border-radius: 0.25rem;
-  color: #ffd78d;
+  color: #ff9500;
   cursor: pointer;
   display: inline-flex;
   font-size: 1rem;
@@ -195,7 +200,7 @@ div.top-bar #menu-button {
 }
 
 #versions-menu > .btn > .version-id {
-  color: #ffe95c;
+  color: #ff9500;
   font-weight: bold;
   padding: 0 0 0 6px;
 }
@@ -347,7 +352,7 @@ div.nav-left li {
 div.nav-left li > a,
 div.nav-left li > div.submenu > a.reference {
   border-radius: 5px 0 0 5px;
-  color: #9d9175;
+  color: #ff9500;
   display: block;
   font-size: 13px;
   margin-left: -5px;
@@ -420,7 +425,7 @@ div.nav-right > #toc-local {
   flex-direction: column;
   margin: 0 0 0 6px;
   max-width: var(--right-menu-width);
-  padding: 0 0 0 10px;
+  padding: 0 0 0 1rem;
 }
 
 div.nav-right > #toc-local > div.header {
@@ -431,7 +436,7 @@ div.nav-right > #toc-local > div.header {
 div.nav-right > #toc-local > a.list-group-item {
   border: none;
   border-left: 4px solid transparent;
-  color: #9d9175;
+  color: #ff9500;
   display: block;
   font-size: 13px;
   line-height: 1.2;
@@ -514,7 +519,7 @@ div.warning .version {
 
 div.document {
   background-color: #282828;
-  color: #b0b0b0;
+  color: #D6D6D6;
   border-radius: 2pt;
   box-shadow: 2px 2px 3px 0 #000;
   padding: var(--document-padding);
@@ -526,12 +531,18 @@ div.document::after { /* clearfix */
   clear: both;
 }
 
+
 div.copyright {
+  color: #cccccc;
   font-size: 12px;
   margin-top: 3px;
   opacity: 0.5;
 }
 
+.copyright a {
+  color: #ff9500;
+  text-decoration: underline;
+}
 div.document h1 {
   border-bottom: 1px solid #555;
   color: #ccc;
@@ -626,7 +637,7 @@ div.document :is(h1, h2, h3, h4) > code {
 }
 
 .prev-next-area > a > .prev-next-info > p.prev-next-subtitle {
-  color: #888;
+  color: #ffffe8;
 }
 
 .prev-next-area > a:hover > .prev-next-info > p.prev-next-title {
@@ -690,7 +701,9 @@ div.highlight-text pre:before {
   content: "text";
   color: #666;
 }
-
+span.keyword {
+  color: #ffffcA;
+}
 
 /*----------------------------------------------------------------------------*
  * Search elements
@@ -867,7 +880,7 @@ table.docutils td {
 }
 
 table.docutils th {
-  color: #9d9175;
+  color: #ff9500;
 }
 
 /* This ensures that when navigating to a link within a page, the link

doc/_sphinx/theme/layout.html

@@ -83,8 +83,8 @@
     });
   </script>
 
-  <a href="{{pathto('index')}}" class="logo_image">
-    <img src="{{pathto('_static/logo_flame.png', 1)}}">
+  <a href="{{pathto('index')}}" class="logo_image" aria-label="Navigate to home page">
+    <img src="{{pathto('_static/logo_flame.png', 1)}}" alt="Flame logo: a fiery symbol along with the FLAME wordmark.">
   </a>  
   <div class="highlight-box" role="alert" style="display:none">
     <div>

doc/flame/inputs/other_inputs.md

@@ -14,7 +14,7 @@ Flame provides a component capable of creating a virtual joystick for taking inp
 To use this feature, you need to create a `JoystickComponent`, configure it the way you want, and
 add it to your game.
 
-Check this example to get a better understanding:
+Check out the following example to get a better understanding:
 
 ```dart
 class MyGame extends FlameGame {
@@ -74,12 +74,13 @@ class Player extends SpriteComponent with HasGameRef {
 }
 ```
 
-So in this example, we create the classes `MyGame` and `Player`. `MyGame` creates a joystick which is
-passed to the `Player` when it is created. In the `Player` class we act upon the current state of
-the joystick.
+In this example, we created the classes `MyGame` and `Player`.
+`MyGame` creates a joystick which is passed to the `Player` when the latter is created.
+In the `Player` class we act upon the current state of the joystick.
 
 The joystick has a few fields that change depending on what state it is in.
-These are the fields that should be used to know the state of the joystick:
+
+Following fields should be used to know the state of the joystick:
 
 - `intensity`: The percentage [0.0, 1.0] that the knob is dragged from the epicenter to the edge of
   the joystick (or `knobRadius` if that is set).
@@ -90,13 +91,16 @@ These are the fields that should be used to know the state of the joystick:
 If you want to create buttons to go with your joystick, check out
 [`HudButtonComponent`](#hudbuttoncomponent).
 
-A full examples of how to use it can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_example.dart).
-And it can be seen running [here](https://examples.flame-engine.org/#/Input_Joystick).
+For the complete code on implementing the joystick, check out the
+[Joystick Example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_example.dart).
+You can also view the
+[JoystickComponent in action](https://examples.flame-engine.org/#/Input_Joystick)
+to see a live example of the joystick input function integrated into a game.
 
-There is also a more advanced example
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_advanced_example.dart)
-which is running [here](https://examples.flame-engine.org/#/Input_Joystick_Advanced).
+For an additional challenge, explore the
+[Advanced Joystick Example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/input/joystick_advanced_example.dart).
+See what else the advanced features can do in the
+[live demo](https://examples.flame-engine.org/#/Input_Joystick_Advanced).
 
 
 ## HudButtonComponent
@@ -134,8 +138,8 @@ else which isn't a pure sprite.
 
 ## Gamepad
 
-Flame has a separate plugin to support external game controllers (gamepads), check
-[here](https://github.com/flame-engine/flame_gamepad) for more information.
+Flame has a dedicated plugin to support external game controllers (gamepads).
+Find more information in the [Gamepads repository](https://github.com/flame-engine/gamepad).
 
 
 ## AdvancedButtonComponent

doc/flame/other/debug.md

@@ -9,8 +9,7 @@ When `debugMode` is enabled, each `PositionComponent` will be rendered with thei
 have their positions written on the screen. This way, you can visually verify the components
 boundaries and positions.
 
-To see a working example of the debugging features of the `FlameGame`, check this
-[example](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/components/debug_example.dart).
+Check out this [working example of the debugging features of the `FlameGame`](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/components/debug_example.dart).
 
 
 ## Devtools extension

doc/flame/overlays.md

@@ -42,5 +42,4 @@ Widget build(BuildContext context) {
 The order of rendering for an overlay is determined by the order of the keys in the
 `overlayBuilderMap`.
 
-An example of this feature can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/system/overlays_example.dart).
+See an [example of the Overlays feature](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/system/overlays_example.dart).

doc/flame/rendering/images.md

@@ -192,9 +192,8 @@ parameter `overridePaint` that parameter will override the current `Sprite` pain
 render call.
 
 `Sprite`s can also be used as widgets, to do so just use `SpriteWidget` class.
-
-A complete example using sprite as widgets can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_widget_example.dart).
+Here is a complete
+[example using sprite as widgets](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_widget_example.dart).
 
 
 ## SpriteBatch
@@ -209,8 +208,8 @@ You render it with a `Canvas` and an optional `Paint`, `BlendMode` and `CullRect
 
 A `SpriteBatchComponent` is also available for your convenience.
 
-See the examples
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_batch_example.dart).
+See how to use it in the
+[SpriteBatch examples](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_batch_example.dart)
 
 
 ## ImageComposition
@@ -317,16 +316,16 @@ and the former ticks the internal clock to update the frames.
 Animations are normally used inside `SpriteAnimationComponent`s, but custom components with several
 Animations can be created as well.
 
-A complete example of using animations as widgets can be found
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_animation_widget_example.dart).
+To learn more, check out the full example code of
+[using animations as widgets](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/widgets/sprite_animation_widget_example.dart).
 
 
 ## SpriteSheet
 
 Sprite sheets are big images with several frames of the same sprite on it and is a very good way to
-organize and keep your animations stored. Flame provides a very simple utility class to deal with
-SpriteSheets, with it you can load your sprite sheet image and extract animations from it. Below is
-a very simple example of how to use it:
+organize and store your animations. Flame provides a very simple utility class to deal with
+SpriteSheets, using which you can load your sprite sheet image and extract animations from it as
+well. Following is a simple example of how to use it:
 
 ```dart
 import 'package:flame/sprite.dart';
@@ -363,5 +362,5 @@ spriteSheet.getSpriteById(2); // by id
 spriteSheet.getSprite(0, 0); // row, column
 ```
 
-You can see a full example of the `SpriteSheet` class
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_sheet_example.dart).
+See a full example of the [`SpriteSheet` class](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/sprites/sprite_sheet_example.dart)
+for more details on how to work with it.

doc/flame/rendering/layers.md

@@ -111,7 +111,7 @@ entire layer. At the moment, out of the box, only the `ShadowProcessor` is avail
 renders a back drop shadow on your layer.
 
 To add processors to your layer, just add them to the layer `preProcessors` or `postProcessors`
-list. For example:
+list, like so:
 
 ```dart
 // Works the same for both DynamicLayer and PreRenderedLayer
@@ -130,8 +130,7 @@ class BackgroundLayer extends PreRenderedLayer {
 
 Custom processors can be created by extending the `LayerProcessor` class.
 
-You can check a working example of layers
-[here](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/layers_example.dart).
+See [a working example of layers](https://github.com/flame-engine/flame/blob/main/examples/lib/stories/rendering/layers_example.dart).
 
 
 ## Snapshots
@@ -158,8 +157,8 @@ class MyGame extends FlameGame {
 
 Setting `renderSnapshot` to `true` (the default) on a snapshot-enabled component behaves similarly
 to a `PreRenderedLayer`. The component is rendered only once, cached in memory and then just
-replicated on the game canvas afterwards. They are useful for caching content that doesn't change
-during the game, like a background for example.
+replicated on the game canvas afterwards. This is useful for caching content that doesn't change
+during the game, like a background.
 
 ```dart
 class SnapshotComponent extends PositionComponent with Snapshot {}
@@ -243,7 +242,7 @@ class MyGame extends FlameGame {
 
 ### Snapshots that are cropped or off-center
 
-Sometimes your snapshot `Image` may appear cropped, or not in the position that is expected.
+Sometimes your snapshot `Image` may appear cropped, or not in the position you expected.
 
 This is because the contents of a `Picture` can be positioned anywhere with respect to the origin,
 but when it is converted to an `Image`, the image always starts from `0,0`. This means that
@@ -254,7 +253,7 @@ The best way to deal with this is to ensure that your `Snapshot` component is al
 contain what you expect it to.
 
 However, this is not always possible. To move (or rotate, or scale etc) the snapshot before
-converting it to an image, pass a transformation matrix to `snapshotToImage`.
+converting it to an image, pass a transformation matrix to `snapshotToImage` like so:
 
 ```dart
 // Call something like this to take an image snapshot at any time.

doc/flame/rendering/palette.md

@@ -40,12 +40,12 @@ You can create such an object like this:
 Paint green = Paint()..color = const Color(0xFF00FF00);
 ```
 
-To help you with this and to also keep your game's color palette consistent, Flame adds the `Palette`
-class. You can use it to easily access both `Color`s and `Paint`s where needed and also to define
-the colors your game use as constants, so you don't get those mixed up.
+To help you with this and also keep your game's color palette consistent, Flame adds the `Palette`
+class. You can use it to easily access both `Color`s and `Paint`s where needed and also define
+the colors your game use as constants, so that you don't get those mixed up.
 
 The `BasicPalette` class is an example of what a palette can look like, and adds black and white as
-colors. So to use black or white you can access those directly from the `BasicPalette`; for example,
+colors. So you can access black or white directly from the `BasicPalette`; for example,
 using `color`:
 
 ```dart
@@ -60,8 +60,8 @@ canvas.drawRect(rect, BasicPalette.black.paint);
 
 However, the idea is that you can create your own palette, following the `BasicPalette` example, and
 add the color palette/scheme of your game. Then you will be able to statically access any color in
-your components and classes. Below is an example of a `Palette` implementation, from the example
-game [BGUG](https://github.com/bluefireteam/bgug/blob/master/lib/palette.dart):
+your components and classes. Below is an example of a `Palette` implementation, from the [example
+game BGUG](https://github.com/bluefireteam/bgug/blob/master/lib/palette.dart):
 
 ```dart
 import 'dart:ui';